<template>
  <view class="container">
    <view class="content">
		<view>
		   <text class="label">扫面下方二维码添加客服微信（可长按保存图片用微信扫一扫添加客户微信）:</text>
		</view>
      <view class="qr-code">
		   <image 
		            class="qr-code" 
		            :src="qrCodeUrl" 
		            mode="aspectFit" 
		            @click="showImagePreview" 
		          ></image>
	  </view>
	  <view class="contact-info">
	    <text class="label">电话:</text>
	     <a :href="`tel:${phoneNumber}`" class="phone-number">{{ phoneNumber }}</a>
	  </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: '13241122702', // 替换为你的电话
      qrCodeUrl: '../../../static/ewm.jpg' // 替换为你的二维码链接
    };
  },
  methods:{
	   showImagePreview() {
		uni.previewImage({
		  urls: [this.qrCodeUrl], // 需要预览的图片链接数组
		});
	  },
	  downloadImage() {
	        // 长按下载二维码
	        uni.downloadFile({
	          url: this.qrCodeSrc,
	          success: (res) => {
	            if (res.statusCode === 200) {
	              uni.saveImageToPhotosAlbum({
	                filePath: res.tempFilePath,
	                success: () => {
	                  uni.showToast({
	                    title: '已保存到相册',
	                    icon: 'success'
	                  });
	                },
	                fail: () => {
	                  uni.showToast({
	                    title: '保存失败',
	                    icon: 'none'
	                  });
	                }
	              });
	            }
	          },
	          fail: () => {
	            uni.showToast({
	              title: '下载失败',
	              icon: 'none'
	            });
	          }
	        });
			}
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f9f9f9;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.content {
  padding: 10px;
}

.contact-info {
  margin-bottom: 20px;
}

.label {
  font-size: 18px;
   
}

.phone-number {
  font-size: 18px;
  color: #1e0ef6;
}

.qr-code {
  text-align: center;
}

.qr-image {
  width: 150px; /* 根据需要调整大小 */
  height: 150px;
}
</style>